<template>
  <el-card shadow="never" class="margin-top-20 margin-left-20 margin-right-20">
    <!--  -->
    <el-row :gutter="20">
      <!-- 添加按钮  -->
      <el-col :span="6">
        <el-dropdown @command="command">
          <el-button type="primary"> 新建流程 </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">新建流程1 </el-dropdown-item>
            <el-dropdown-item command="2">新建流程2 </el-dropdown-item>
            <el-dropdown-item command="3">新建流程3</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <i
          class="el-icon-refresh margin-left-10 cursor-pointer"
          @click="getData"
        />
      </el-col>
      <!-- 列表属性及操作 -->
      <el-col :span="24" class="margin-top-20">
        <el-table
          :data="tableData"
          style="min-width: 100%"
          border
          :header-row-style="{
            height: '48px',
            'font-size': '13px',
            'background-color': '#f6f6f6',
          }"
        >
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column
            align="center"
            prop="process_id"
            label="序号"
            width="55"
          />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="process_name"
            label="流程名称"
            min-width="240"
          />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="on_line_url"
            label="线上地址"
            min-width="210"
          >
            <template slot-scope="{ row }">
              <el-link type="primary" :href="`${VUE_APP_H5_API}flow_path?process_id=${row.process_id}`" target="_blank">
                {{ VUE_APP_H5_API }}flow_path?process_id={{ row.process_id }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="updated_at"
            :formatter="toTime"
            label="更新时间"
            min-width="180"
          />
          <el-table-column
            align="center"
            prop="admin_name"
            label="操作人"
            min-width="180"
          />
          <el-table-column
            align="center"
            prop="status"
            :formatter="toStatus"
            label="状态"
            min-width="100"
          />
          <el-table-column
            align="center"
            prop="address "
            fixed="right"
            min-width="180"
            label="操作"
          >
            <template slot-scope="{ row }">
              <el-row
                type="flex"
                class="row-bg padding-10-0"
                justify="space-around"
              >
                <el-col :span="6">
                  <el-link
                    type="primary"
                    :href="`http://test.sass-cloud.miaoshou.com/flow_path?process_id=${row.process_id}`"
                    target="_blank"
                  >
                    预览
                  </el-link>
                </el-col>
                <el-col :span="6">
                  <el-link
                    type="primary"
                    :href="`/#/consultation/edit?id=${row.process_id}`"
                  >编辑</el-link>
                </el-col>
                <el-col :span="6">
                  <el-link type="primary" @click="toggle(row)">
                    {{
                      row.status == 1 ? "禁用" : row.status == 0 ? "启用" : ""
                    }}
                  </el-link>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination
      class="margin-top-10 text-align-right"
      background
      layout="prev, pager, next"
      :current-page.sync="page"
      :total="total"
      @current-change="currentChange"
    />
  </el-card>
</template>
<script>
import * as api from '@/api/consult-process'
export default {
  name: 'ConsultationProcess',
  data() {
    return {
      columns: [],
      tableData: [],
      VUE_APP_H5_API: process.env.VUE_APP_H5_API,
      page: 1,
      total: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    command(row) {
      console.log(row)
      this.$router.push({
        path: './edit',
        query: {
          type: row
        }
      })
    },
    toTime(row, column, cellValue, index) {
      return new Date(row.update_time * 1000).format('yyyy-MM-dd hh:mm:ss')
    },
    toStatus(row, column, cellValue, index) {
      return row.status == 1 ? '启用' : row.status == 0 ? '停用' : ''
    },

    currentChange() {
      this.getData()
    },
    toggle(item) {
      const status = item.status == 1 ? 0 : 1
      api.consult_process_update({ process_id: item.process_id, status }).then((res) => {
        this.$message.info(res.msg)
        this.getData()
      })
    },
    getData() {
      api.consult_process_list({ page: this.page }).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.totalcount
      })
    }
  }
}
</script>
